<template>
  <s-layout
    navbar="inner1"
    :bgStyle="{
        src: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/myicon/20250409/3e1b3e3b18ab1e77a844d48b9642368a.png',
		color:'#fff'
    }"
  >
    <assNavbar
      title="鲸囍商户"
      :color="state.show?'#3d3d3d':'#fff'"
      :background="{
    		img:'none',
    		BGcolor:state.show?'#fff':'transparent'
    	}"
    ></assNavbar>
    <view>
      <view class="money ss-p-y-25 ss-p-x-30">
        <view class="ss-flex justify-between">
          <view>
            <view
              class="ss-flex"
              v-if="state.merchant.id"
              @click="goPage"
            >
              <view
                class="font-2 ss-m-r-40"
                style="font-weight: bold;"
              >{{state.merchant.merchant_name}}</view>
              <uni-icons
                color="#0CBCBA"
                v-if="state.merchant.state==1"
                type="checkbox-filled"
                size="16"
              ></uni-icons>
              <uni-icons
                color="#D83724"
                v-else
                type="clear"
                size="16"
              ></uni-icons>
            </view>
            <view class="money-top ss-flex justify-between align-center">
              <view class="ss-flex align-center">
                <view class="total-text">今日总收入(元)</view>
                <view class="guarantee ss-m-l-10 ss-flex align-center justify-center">
                  <image
                    class="guarantee-icon"
                    src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/myicon/20250409/f31e848b2764e18d7ef9daa6a65bf3b3.png"
                  >
                  </image>
                  <view>账户安全保障中</view>
                </view>
              </view>
            </view>
          </view>
    
          <view
            @tap="showEditPop"
            class="btn-edit text-center "
          >
            <view>超引擎代金券</view>
            <view>修改</view>
          </view>
        </view>
    
        <view class="ss-flex justify-between">
          <view class="total-money ss-m-t-15">{{state.data.total_money}}</view>
          <view
            @tap="openscan"
            class="scan-btn ss-flex"
          >
            <uni-icons
              class="ss-m-r-10"
              color="#272636"
              type="scan"
              size="14"
            ></uni-icons>
            扫码核销
          </view>
          <!-- <image
    		  :src="sheep.$url.cdn('/static/merchant/shop/icon-scan.png')"
    		  class="scan-btn"
    		  @tap="openscan"
    		></image> -->
        </view>
    
      </view>

      <image
        v-if="state.dataStatus==1"
        :src="sheep.$url.cdn('/static/icon/ygb-banner-surprise-14.png')"
        class="coupon-img"
        @click.stop="sheep.$router.go('/pages/tuangou/prize_merchants_of_day')"
      ></image>

      <image
        v-if="state.dataStatus==2"
        :src="'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250508/ce1696b5254868c7f9fca1abbad40c67.png'"
        class="coupon-img"
        @click.stop="sheep.$router.go('/pages/tuangou/prize_merchants_of_week')"
      ></image>

      <su-sticky
        class="sticky-top"
        bgColor="#fff"
      >
        <view class="tabs ss-flex justify-start align-baseline">
          <view
            class="tabs-item"
            :class="[state.tab_index === index ? 'tab-active' : '']"
            v-for="(item,index) in state.tabs_list"
            :key="index"
            @click.stop="changeTab(index,item.name)"
          >{{item.name}}</view>
        </view>
      </su-sticky>
      <view class="ss-safe-bottom">
        <view class="list ">
          <view
            class="year ss-p-20"
            v-if="state.tab_index !=0"
          >
            <view class="ss-flex align-center time-boxNew">
              <view class="year-title ss-m-r-5">{{state.today}}</view>
              <view class="year-title ss-m-r-5">
                共获得{{state.num}}单
              </view>
            </view>
            <view class="year-money">￥{{state.data.year_money}}</view>
            <view
              v-if="state.tab_index != 4"
              class="income"
              @click="goDetail"
            >查看详情</view>
          </view>
          <scroll-view
            scroll-y="true"
            :refresher-enabled="true"
            @scrolltolower="onScrollToLower"
            :class="[state.tab_index !=0?'list-scrollNew':'list-scroll']"
          >
            <view
              :class="['item']"
              v-for="(v,p) in state.list"
              :key="p"
            >

              <view class="item-left ss-flex">
                <image
                  class="item-left-icon"
                  src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/myicon/20250409/ef808f6454df9140946d82de9bbdf1bf.png"
                >
                </image>
                <view class="ss-flex-1">
                  <view class="ss-flex justify-between">
                    <view class="item-name ss-line-1">{{v.title}}</view>
                    <view class="item-money ss-flex-1 ss-line-1 text-right">￥{{v.fee}}</view>
                  </view>

                  <view class="w-100 ss-flex justify-between align-center ss-m-t-8">
                    <view class="item-time ss-m-r-30">{{v.type}}&nbsp;&nbsp;{{v.date}} {{v.time}}</view>
                    <view class="item-time ss-flex-1 ss-line-1 text-right">{{v.settle}}</view>
                  </view>
                </view>
              </view>

            </view>
            <s-empty
              v-if="state.list.length==0"
              paddingTop="100"
              icon="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/soldout-empty.png"
              text="暂无数据"
            >
            </s-empty>
            <uni-load-more
              v-if="state.list.length>0"
              @tap="onScrollToLower"
              :status="state.loadStatus"
              :content-text="{ contentdown: '上拉加载更多' }"
            />
          </scroll-view>
        </view>
      </view>
    </view>
    <tui-calendar
      ref="calendar"
      isFixed
      type="2"
      title=""
      @change="calendarChange"
    ></tui-calendar>
	<couponEditPop ref="couponEditPopRef"></couponEditPop>
  </s-layout>
</template>

<script setup>
import {
  ref,
  computed,
  reactive
} from 'vue';
import {
  onLoad,
  onShow,
  onPageScroll,
  onReachBottom
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import payAPI from '../../api/pay';
import tuiCalendar from "./components/tui-calendar/tui-calendar.vue"
import dayjs from 'dayjs'
import isLeapYear from 'dayjs/plugin/isLeapYear' // 可选插件
import weekday from 'dayjs/plugin/weekday'      // 用于更精准的周计算
import isoWeek from 'dayjs/plugin/isoWeek'
import assNavbar from '@/components/ass-navbar.vue';
import couponEditPop from "./components/coupon-edit-pop.vue"
import _ from 'lodash';
const state = reactive({
  index: 0,
  today: '',//今天的年月日
  merchant: {},
  refresh: true,
  loadStatus: '',
  tabs_list: [
    {
      name: '今天',
      id: 5,
    },
    {
      name: '本周',
      id: 1,
    }, {
      name: '本月',
      id: 2,
    },
    {
      name: '本年',
      id: 3,
    },
    {
      name: '自定义查询',
      id: 4,
    },
  ],
  tab_index: 0,
  data: {
    total_money: '0.00', //总收入
    ing_money: '0.00', //待结算
    money: '0.00', //可提现
    refund_money: '0.0', //已退款
  },
  list: [],
  startDate: '2000',
  endDate: '',
  year: '',
  num: 0,
  fee: '',
  dateRange: null,
  history_data: {}, // 历史数据
  shop_name: '店铺名称', // 店铺名称
  show: false,
  showTime: [],
  loadShow: true,
  dataStatus: 1,
  pagination: {
    current_page: 1,
    total: 1,
    last_page: 1,
    pageSize: 10
  },
  selectedIndex: ''
})
const calendar = ref(null);
const couponEditPopRef = ref(null);
function showEditPop () {
  console.log('kai???')
  couponEditPopRef.value.open()
}


const goPage = () => {
  sheep.$router.go('/ygb/pages/commission/giveaway/surperise', {
    current: 1,
  })
}


onLoad(() => {
  // 初始化时加载数据
  // loadData();
  getLotteryState()
  getJxData();
  state.today = getToday('MM/DD')
  state.loadShow = false

})

onShow(() => {
  if (state.loadShow) {
    return
  }
  // getJxData(state.showTime);
})
const goDetail = () => {
  resetDtaList()
  state.tab_index = 4
  let name = state.tabs_list[state.selectedIndex].name
  if (name == '本周') {
    const { start, end } = getCurrentWeek('YYYY-MM-DD')
    state.month = [start, end]
  } else if (name == '本月') {
    const { start, end } = getCurrentMonth('YYYY-MM-DD')
    state.month = [start, end]
  } else if (name == '本年') {
    state.year = dayjs().format('YYYY')
    const { start, end } = getCurrentYear('YYYY-MM-DD')
    state.month = [start, end]
  }
  getJxData()
}


onPageScroll((e) => {
  if (e.scrollTop >= 10) {
    state.show = true
  } else {
    state.show = false
  }
})
const resetDtaList = () => {
  state.pagination.current_page = 1
  state.list = []
  state.month = []
}




const changeTab = (e, name) => {
  state.selectedIndex = e

  state.showTime == []
  if (name == '今天') {
    state.today = getToday('MM/DD')
  } else if (name == '本周') {
    const { start, end } = getCurrentWeek('MM/DD')
    state.today = `${start}~${end}`
  } else if (name == '本月') {
    const { start, end } = getCurrentMonth('MM/DD')
    state.today = `${start}~${end}`
  } else if (name == '本年') {
    state.year = dayjs().format('YYYY')
    const { start, end } = getCurrentYear('MM/DD')
    state.today = `${start}~${end}`
  } else {
    calendar.value && calendar.value.show();
  }
  if (state.tabs_list[state.selectedIndex].id != 4) {

    state.tab_index = e;

    resetDtaList()
    getJxData();
  }
}
// 获取今天日期
const getToday = (type = 'YYYY-MM-DD') => {
  return dayjs().format(type)
}

// 获取本周范围（ISO 标准周：周一为起始）
const getCurrentWeek = (type = 'YYYY-MM-DD') => {
  const start = dayjs().startOf('week').add(0, 'day').format(type);
  const end = dayjs().endOf('week').add(0, 'day').format(type);
  return { start, end }
}

// 获取本月范围
const getCurrentMonth = (type = 'YYYY-MM-DD') => {
  const start = dayjs().startOf('month').format(type)
  const end = dayjs().endOf('month').format(type)
  return { start, end }
}

// 获取本年范围
const getCurrentYear = (type = 'YYYY-MM-DD') => {
  const start = dayjs().startOf('year').format(type)
  const end = dayjs().endOf('year').format(type)
  return { start, end }
}

const bindYear = (e) => {
  state.year = e.detail.value
}

const bindDateChange = (e) => {
}

const getLotteryState = async () => {
  const { error, data } = await payAPI.getLotteryState();
  if (error === 0) {
    state.dataStatus = data.group_id
  }
}
const onRefresh = () => {
  console.log('onRefresh');
  // state.refresh = false

}
const onScrollToLower = () => {
  state.pagination.current_page++
  if (state.loadStatus !== 'noMore') {
    getJxData();
  }

}
// 核销
function openscan () {
  sheep.$router.go('/ygb/pages/merchant/surprise/scanCode')
}
//获取商城商户收益列表
async function getJxData (month = []) {
  state.loadStatus = 'loading';
  const {
    error,
    data
  } = await payAPI.getJxMoneyList({
    type: state.tabs_list[state.tab_index].id,
    month: state.month,
    page: state.pagination.current_page,
    pageSize: state.pagination.pageSize
  });
  state.refresh = false
  if (error === 0) {
    state.pagination.last_page = data.list.last_page
    if (state.pagination.current_page < state.pagination.last_page) {
      state.loadStatus = 'more';
    } else {
      state.loadStatus = 'noMore';
    }
    if (JSON.stringify(data?.list) != '{}') {
      state.list = state.list.concat(data?.list?.data)
      state.data.total_money = data?.list?.total;//今日总收入
      state.data.year_money = data?.list?.completed;//区间总收入
      state.num = data?.list?.num;
    } else {
      state.list = state.list
    }
    state.merchant = data.merchant
  } else {
    state.loadStatus = 'noMore';
  }

}
onReachBottom(() => {
  onScrollToLower()
})

function calendarChange (e) {

  resetDtaList()
  state.month = [e.startDate, e.endDate]
  state.showTime = state.month
  let start = dayjs(e.startDate).format('MM/DD');
  let end = dayjs(e.endDate).format('MM/DD');
  state.today = `${start}~${end}`
  state.tab_index = state.selectedIndex
  getJxData();
}
</script>

<style lang="scss" scoped>
.sticky-top {
  top: 88rpx !important;
}
.time-box {
  display: flex;
  justify-content: space-between;
  padding: 0 36rpx 14rpx 36rpx;
  .time {
    font-size: 32rpx;
    font-weight: normal;
    color: #1e1e1e;
  }
}
.time-boxNew {
  display: flex;
  justify-content: space-between;
  // padding: 0 36rpx 14rpx 36rpx;
  .time {
    font-size: 32rpx;
    font-weight: normal;
    color: #1e1e1e;
  }

  .income {
    font-size: 28rpx;
    font-weight: normal;
    color: #b0b0b0;
  }
}
view {
  box-sizing: border-box;
}

.money {
  width: 710rpx;

  border-radius: 20rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
  margin: 20rpx auto 0;

  .money-top {
    .total-text {
      font-size: 30rpx;
      font-weight: normal;
      color: #5b5b5b;
    }

    .guarantee {
      width: 267rpx;
      height: 40rpx;
      border-radius: 16rpx;
      background: #fef0ef;
      font-size: 28rpx;
      font-weight: normal;
      line-height: 33rpx;
      text-align: center;
      color: #9e9e9e;

      .guarantee-icon {
        width: 26rpx;
        height: 26rpx;
        margin-right: 10rpx;
      }
    }

    .withdraw {
      font-size: 30rpx;
      font-weight: normal;
      color: #3922e5;
    }
  }

  .total-money {
    font-size: 72rpx;
    font-weight: 500;
    color: #1e1e1e;
  }

  .money-item {
    width: 50%;
    font-size: 30rpx;
    font-weight: normal;
    color: #9e9e9e;

    text {
      color: #1e1e1e;
    }
  }
}

.tabs {
  margin-top: 10rpx;
  padding-bottom: 10rpx;
  padding: 10rpx 30rpx 10rpx 30rpx;

  .tabs-item {
    font-size: 28rpx;
    font-weight: normal;
    color: #b0b0b0;
    margin-right: 30rpx;
    text-align: center;
  }
}

.list {
  width: 100%;
  // max-height: 552rpx;
  border-radius: 20rpx;
  background: #ffffff;
  padding: 0 32rpx;
  // box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
  // margin: 30rpx auto 0;

  .list-scroll {
    width: 100%;
    max-height: 730rpx;
  }
  .list-scrollNew {
    width: 100%;
    max-height: calc(100vh - 64rpx);
    // max-height: 642rpx;
  }
}
.item {
  width: 100%;
  height: 117rpx;
  border-bottom: 1rpx solid #acacac;

  .item-left {
    width: 100%;
    height: 117rpx;

    .item-left-icon {
      width: 72rpx;
      height: 72rpx;
      margin-right: 20rpx;
    }

    .item-name {
      font-size: 32rpx;
      font-weight: normal;
      color: #1e1e1e;
    }

    .item-time {
      font-size: 28rpx;
      font-weight: normal;
      color: #a9a9a9;
    }

    .item-money {
      font-size: 36rpx;
      font-weight: 500;
      color: #1e1e1e;
    }
  }
}

.year {
  width: 99%;
  // width: 710rpx;
  height: 200rpx;
  border-radius: 20rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
  margin: 20rpx auto 0;
  .income {
    font-size: 28rpx;
    font-weight: normal;
    color: #6da1e6;
    display: flex;
    justify-content: flex-end;
  }
  .year-title {
    font-size: 28rpx;
    font-weight: normal;
    color: #1e1e1e;
  }

  .year-total {
    font-size: 28rpx;
    font-weight: normal;
    color: #b0b0b0;
    margin-top: 47rpx;
  }

  .year-money {
    color: #1e1e1e;
    font-weight: 700;
    font-size: 50rpx;
    margin-top: 26rpx;
  }
}

.tab-active {
  font-size: 36rpx !important;
  font-weight: 500 !important;
  color: #1855ff !important;
}

image {
  display: block;
  width: 100%;
  height: 100%;
}

.page {
}

.list {
  .date_list {
    padding: 0 10rpx;

    .date_title {
      font-size: 26rpx;
      display: inline-block;
      padding: 10rpx 15rpx;
      margin-bottom: 20rpx;
      background-color: #eaeaea;
    }

    .card {
      background: #fff;
      border-radius: 12rpx;
      padding: 20rpx;
      display: flex;
      align-items: flex-start;
      margin-bottom: 20rpx;

      .left {
        margin-right: 20rpx;
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }

      .right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .info {
          .title {
            font-size: 32rpx;
            color: #333;
            margin-bottom: 8rpx;
          }

          .time {
            font-size: 26rpx;
            color: #999;
          }
        }

        .amount {
          .price {
            font-size: 32rpx;
            color: #ffb800;
            font-weight: 500;
          }

          .fee {
            font-size: 26rpx;
            color: #999;
          }
        }
      }
    }
  }
}

.header_card {
  background: linear-gradient(180deg, #87ceeb, #b0e0e6);
  padding: 30rpx;
  margin: 20rpx;
  border-radius: 12rpx;

  .date {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
  }

  .amount_info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .left {
      .text {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 16rpx;
      }

      .btn {
        display: inline-block;
        padding: 10rpx 40rpx;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 100rpx;
        font-size: 28rpx;
        color: #333;
      }
    }

    .right {
      text-align: left;

      .item {
        font-size: 26rpx;
        color: #333;
        margin-bottom: 8rpx;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.coupon-img {
  width: 100%;
  height: 280rpx;
}

.btn-edit {
  flex-shrink: 0;
  padding: 10rpx 8rpx;
  border-radius: 20rpx;
  color: #fff;
  font-size: 24rpx;
  background: linear-gradient(180deg, #ff41ae 0%, #be00ff 100%);
  display: block;
}
.scan-btn {
  padding: 10rpx;
  color: #272636;
  font-size: 24rpx;
  border-radius: 24rpx;
  font-family: PingFang SC;

  border: 2rpx solid #000000;
}
</style>